<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位属性</title>
		<style>
			/* div宽高一致 300*300，圆，文本放大：10em，垂直居中 
			每个圆添加一个颜色
			*/
		   span{
			   width: 300px;
			   height: 300px;
			   border-radius: 50%;
			   font-size: 10em;
			   text-align: center;
			   line-height: 300px;
			   color: #fff;
			   /* 网页阴影：①滤镜：下阴影 ②文本阴影 ③盒子阴影 */
			   /* 属性值：X  Y  模糊半径 阴影半径 颜色 内外阴影 inset */
			   box-shadow: 5px 5px 10px 10px #d0d0d0 inset;
			   /* 浮动定位：float属性：none|left|right; */
			   float: left;
		   }
		   .d1{
			   background-color: #ff98c5;
		   }
		   .d2{
			   background-color: #ff9bed;
			   clear: both;
		   }
		   .d3{
			   background-color: #c6a4ff;
			   /* clear清除浮动：left|right|both;直接作用在浮动元素上*/
			   clear: left;
		   }
		   .d4{
			   background-color: #b0fff9;
		   }
		   .d5{
			   background-color: #d0ff9e;
		   }
		</style>
	</head>
	<body>
		<!-- 什么是定位？ 页面元素通过“定位方式”指定具体位置 
		     定位方式6种：①普通流定位|文档流定位：页面元素分为：块、行、行内元素，按照元素特点定位元素
			             ②浮动定位：页面上左右布局，可以让元素飘起来，飘起来元素转块元素
						 ③相对定位：相对于父级元素进行定位，没有父级，按照baby定位
						           元素不脱离文档流
						 ④绝对定位：相对于父级元素进行定位，没有父级，按照页面左顶角定位
						           文档脱离文档流
						   堆叠属性z-index：属性值  9999
						 ⑤固定定位：广告接口固定在页面右下角, position: fixed;
		-->
		<span class="d1">1</span>
		<span class="d2">2</span>
		<span class="d3">3</span>
		<span class="d4">4</span>
		<span class="d5">5</span>
	</body>
</html>